<template>
  <div id="Login">
    ChangePassword
  </div>

  <el-input
    v-model="username"
    placeholder="Old Password"
    type="password"
    :show-password=true
    maxlength="20"
    size="large"
    :prefix-icon="Lock"
    class="BOX_input"
  ></el-input>

  <el-input
    v-model="password"
    placeholder="New Password"
    type="password"
    :show-password=true
    size="large"
    :prefix-icon="Lock"
    class="BOX_input"
  ></el-input>

  <div id="cutLine"></div>

  <el-button
    type="primary"
    class="BOX_button"
    @click="click"
  >Confirm</el-button>
  
</template>
  
  <script setup>
  import { ref } from "vue";
  import { User, Lock } from "@element-plus/icons-vue";
  import { ElMessage } from "element-plus";
  import { useRouter } from "vue-router";
  import { changePassword } from "../api/api";
  
  const username = ref("");
  const password = ref("");
  
  async function click() {
    // 输入检测
    if (username.value == "") {
      ElMessage.error("Please input OLD PASSWORD");
      return;
    } else if (password.value == "") {
      ElMessage.error("Please input NEW PASSWORD");
      return;
    } else if(username.value == password.value){
        ElMessage.error("The NEW PASSWORD cannot be THE SAME as the OLD PASSWORD")
    }
    let res = await changePassword(username.value,password.value)
    if(res == 1){
      ElMessage.success("Success")
    }else if(res == 2){
      ElMessage.warning("Wrong Password")
    }
  }
  </script>
  
  <style scoped>
#Login {
  width: 80%;
  font-weight: 1000;
  font-size: large;
  color: white;
}
#cutLine {
  width: 90%;
  height: 1px;
  background-color: gray;
  top: 10px;
}
.BOX_input {
  width: 80%;
  margin: 10px;
}
.BOX_button {
  width: 80%;
  margin: 40px;
}
</style>